<script setup>
import xs from "./components/xs.vue";
import mt from "./components/mt.vue";
import tbu from "./components/tbu.vue";
import { ref } from "vue"
let x = ref(xs)
let s = ref(true)
let ss = ref(false)
    

function fn1() {
  this.x = xs
  this.s = true
  this.ss = false
}
function fn2() {
  this.x = mt
  this.s = false
  this.ss = true
}
</script>

<template>

  <div id="app">
    <div class="box">
      <!-- 开头 -->
      <tbu>
        <!-- 天才出院 -->
        <div class="title">
          <div class="top">
            <div>北京市<span><select class="xlk"></select></span></div>
            <div>···</div>
          </div>
          <div class="bottom">
            <img class="im"
              src="https://assets.msn.cn/weathermapdata/1/static/weather/Icons/taskbar_v10/Condition_Card/CloudyV3.svg"
              alt="">
            <div>22</div>
            <span>°C</span>
            <div>☔️预计明天有阵雨></div>
          </div>
        </div>
      </tbu>
      <!-- 重点观察对象 -->
      <div class="zd">
        <div class="top">
          <button @click="fn1()">每小时</button>
          <div v-show="s"></div>
        </div>
        <div class="bottom">
          <button @click="fn2()">每天</button>
          <div v-show="ss"></div>
        </div>
      </div>
      <!-- 最后的主角 -->
      <div class="zj">
        <div class="item">
          <!-- 每小时 -->
          <component :is="x"></component>
          <!-- 每天 -->
        </div>
      </div>
    </div>
  </div>
</template>

<style>
.im {
  width: 45px;
}

.imx {
  width: 25px;
}

.xlk {
  border: none;
  outline: none;
  background: none;
  color: white;
}

.box {
  border-radius: 3%;
  margin: 10% auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 15px;
  color: white;
  width: 350px;
  border: #591313 1px solid;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  /* background-image: url(https://photo-static-api.fotomore.com/creative/vcg/veer/612/veer-150444756.jpg); */
  background-image: url(https://tse2-mm.cn.bing.net/th/id/OIP-C.Uo0QtO-Q3Ydg_xvgK8q86QHaE9?w=271&h=181&c=7&r=0&o=5&dpr=1.3&pid=1.7);
}

/* 开头 */
.title>.top {
  display: flex;
  justify-content: space-between;
}

.title>.bottom {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}

.title>.bottom>div:nth-child(2) {
  flex: 1;
  font-size: 50px;
}

.title>.bottom>span {
  position: absolute;
  left: 33%;
  top: 10%;
}

/* 重点观察对象 */
.zd {
  display: flex;
}

/*  */
.zd>.top {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: end;
}

.zd>.top>button {
  color: white;
  background: none;
  background-color: rgba(24, 50, 75, .7);
  border: #435a70;
  padding: 5px 15px;
  border-radius: 5px 0px 0px 5px;

}

.zd>.top>div {
  background-color: #60cdff;
  width: 25%;
  height: 3px;
  border-radius: 20px;
  position: absolute;
}

/*  */
.zd>.bottom {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: end;
}

.zd>.bottom>button {
  color: white;
  background-color: rgba(46, 69, 92, .7);
  border: #1b344d;
  padding: 5px 20px;
  border-radius: 0px 5px 5px 0px;
}

.zd>.bottom>div {
  background-color: #60cdff;
  width: 25%;
  height: 3px;
  border-radius: 20px;
  position: absolute;
}

/* 最后的主角 */
.zj {
  font-size: 12px;
}

.item {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  flex-direction: column;
  grid-gap: 5px;
}

.list {
  display: flex;
  flex-direction: column;
  background-color: rgba(23, 49, 74, .4);
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 15px 0px;
  border-radius: 5px;
}
</style>

